<!-- 关于我们 2025/7/25 徐安新增 -->
<template>
  <div class="about-container">
    <!-- Hero Section with emotional impact -->
    <div class="hero-section">
      <image class="hero-bg" src="/static/images/background.png" mode="aspectFill"></image>
      <div class="overlay"></div>
      <h1 class="main-title">
        <span class="main-title-qi">智索真源计划</span>
        <span class="main-title-sub">一场关于教育未来的热血征程</span>
      </h1>
    </div>

    <!-- Main Content with emotional storytelling -->
    <div class="content-container">
      <div class="letter-content">
        <p class="greeting">亲爱的企业家、爱心人士，以及所有关心中国未来的朋友们：</p>
        <p class="greeting">您好！</p>

        <p class="intro">我是智索真源平台的创始人之一，一个普通的年轻人，却怀揣着一个不普通的梦想——重塑中国教育与就业的桥梁。今天，我想和您分享我们的故事，一段关于初心、坚持与使命的创业历程。</p>

        <!-- Story sections with visual breaks -->
        <div class="story-section">
          <h2 class="story-title">缘起：一个辗转难眠的夜晚</h2>
          <p>2023年的某个深夜，我躺在床上刷着手机，看到一条新闻：“中国高校毕业生突破1100万，就业率创历史新低。”评论区里，无数年轻人留言：“考研只是为了逃避就业”“考公上岸是唯一出路”“学的用不上，用的没学过”……那一刻，我沉默了。</p>
          <p>我回想起自己的经历：寒窗苦读十几年，拿到一纸文凭，却发现职场需要的不是试卷上的标准答案，而是解决实际问题的能力。而那些真正在一线摸爬滚打的人，却因为缺乏“官方认证”，被挡在机会门外。教育与实践的割裂，正在让无数年轻人迷失，也让社会错失人才。</p>
          <p>那一夜，我失眠了。我问自己：能不能做一个平台，让年轻人在实践中学习，同时获得社会认可的能力证明？</p>
        </div>

        <section class="story-section">
          <h2 class="story-title">破局：从灵感到行动</h2>
          <p>第二天，我激动地拨通了安徽省发改委的电话。本以为会被当成“异想天开”，没想到对方听完后，沉默了几秒，说：“这个想法很有价值，你能做出来吗？”</p>
          <p>政府的肯定，点燃了我的决心。</p>
          <p>我和几个志同道合的小伙伴开始行动。没有资金，我们就挤在学校的创业孵化器里写代码；没有资源，我们就一家家拜访企业，说服他们参与试点。最艰难的时候，团队连续三个月没有工资，靠泡面和熬夜硬扛。但每当我们看到第一批用户在平台上获得认证后，收到企业的面试邀请时，那种成就感，比任何奖金都珍贵。</p>
        </section>

        <section class="story-section">
          <h2 class="story-title">转机：技术与时代的馈赠</h2>
          <p>2024年，AI技术迎来爆发。大量开源模型的成熟，让我们原本需要千万级开发成本的系统，如今用极低的预算就能实现。芜湖市政府主动伸出援手，在数字经济产业园为我们提供了办公场地。时代给了我们机会，而我们，想为时代做点事情。</p>
        </section>

        <section class="story-section">
          <h2 class="story-title">初心：不是为了创业，而是为了改变</h2>
          <p>很多人问我：“你们做这个，能赚钱吗？”</p>
          <p>说实话，我们当然希望项目能活下去，但驱动我们的，从来不是利润，而是问题本身。</p>
          <ul class="impact-list">
            <li>• 如果一个年轻人因为我们的平台，找到了热爱的事业，而不是被迫内卷……</li>
            <li>• 如果一家企业因为我们的认证，招到了真正合适的人才，而不是只看学历……</li>
            <li>• 如果未来某天，中国的教育评价体系里，实践能力与书本知识同等重要……</li>
          </ul>
          <p class="success-definition">这就是我们想要的“成功”。</p>
        </section>

        <!-- Call to Action section -->
        <div class="cta-section">
          <h2 class="cta-title">呼唤：我们需要您的支持</h2>
          <p>今天，智索真源平台还像一棵幼苗，需要阳光雨露的滋养。您的每一份支持，无论是资金、资源，还是转发与建议，都是在为这棵幼苗培土。</p>
          <p>我们相信：教育不该是独木桥，而是一片原野；人才不该被证书定义，而该被能力证明。</p>
          <p class="vision">十年后，当我们的孩子问起：“爸爸妈妈，你们年轻时做过什么？”我们可以骄傲地说：</p>
          <p class="vision-quote">“我们参与了一场教育革命。”</p>
          <p class="signature">——谨以此文，致敬所有为未来奋斗的人。</p>
          <p class="team-name">智索真源团队</p>
          <p class="date">2025年7月</p>

          <!-- Sponsorship Button -->
          <button class="sponsor-button" @click="handleSponsor">立即赞助</button>
       </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutOurPage',
  methods: {
    handleSponsor() {
      uni.navigateTo({
        url: '/pages/sponsorship/index'
      });
    }
  }
}
</script>

<style scoped>
.about-container {
  min-height: 100vh;
  background-color: #f9f7f3;
  color: #333;
}

.hero-section {
  position: relative;
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8vw;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(88, 67, 226, 0.8), rgba(59, 125, 248, 0.8));
  z-index: 1;
}
.main-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fefefe; /* 更亮的白色 */
  text-align: center;
  line-height: 1.3;
  padding: 0 5vw;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.main-title-qi {
  font-size: 7vw;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 1vw;
}
.main-title-sub {
  font-size: 4vw;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-top: 0.5vw;
}

.content-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 5vw;
}

.letter-content {
  font-size: 4vw;
  line-height: 1.8;
}

.greeting {
  margin-bottom: 6vw;
  font-size: 4.5vw;
}

.intro {
  margin-bottom: 8vw;
  text-indent: 8vw;
}

.story-section {
  margin-bottom: 10vw;
  position: relative;
  padding: 5vw;
  border-radius: 2vw;
  background-color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.story-title {
  color: #7d23de;
  font-size: 5vw;
  margin-bottom: 5vw;
  padding-bottom: 2vw;
  border-bottom: 1px solid #f356a4;
}

.impact-list {
  margin: 5vw 0;
  padding-left: 8vw;
}

.impact-list li {
  margin-bottom: 3vw;
  position: relative;
}

.success-definition {
  font-weight: bold;
  color: #f356a4;
  margin-top: 5vw;
  font-size: 4.5vw;
}

.cta-section {
  background: linear-gradient(135deg, #7d5fff 0%, #a29bfe 100%); /* 柔和紫色渐变 */
  color: #fefefe; /* 更亮的白色 */
  padding: 8vw;
  border-radius: 2vw;
  margin-top: 10vw;
  text-align: center;
}

.cta-title {
  color: white;
  font-size: 5.5vw;
  margin-bottom: 5vw;
}

.vision {
  margin: 5vw 0;
  /* font-style: italic;  去除斜体 */
}

.vision-quote {
  font-size: 5vw;
  font-weight: bold;
  margin: 8vw 0;
  color: #ffd700;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  /* font-style: italic;  去除斜体 */
}

.signature {
  margin-top: 8vw;
  /* font-style: italic;  去除斜体 */
}

.team-name {
  font-weight: bold;
  font-size: 4.5vw;
  margin: 3vw 0;
}

.date {
  color: #ddd;
  margin-top: 1vw;
}

.sponsor-button {
  background: linear-gradient(90deg, #f356a4 0%, #ff4757 100%);
  color: white;
  border: none;
  padding: 3vw 8vw;
  font-size: 5vw;
  border-radius: 50px;
  margin-top: 8vw;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(243, 86, 164, 0.4);
}

.sponsor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(243, 86, 164, 0.6);
}

@media (min-width: 768px) {
  .main-title-qi { font-size: 3vw; }
  .main-title-sub { font-size: 1.5vw; }
  .letter-content {
    font-size: 1.5vw;
  }
  .story-title {
    font-size: 2.5vw;
  }
  .cta-title {
    font-size: 2.5vw;
  }
  .vision-quote {
    font-size: 2.5vw;
  }
  .sponsor-button {
    font-size: 2vw;
    padding: 1.5vw 4vw;
  }
}
</style>